<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>单号规则列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--	 @{}	静态资源目录下的文件-->
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">

    <div class="layui-row">

    <form class="layui-form layui-col-md12 ok-search-form">

        <div class="layui-input-inline">
            <label class="layui-form-label" style="width: 90px">规则类型</label>
            <!-- 该inline样式必须写，否则会出现不左右，而是上下排列的问题 -->
            <div class="layui-input-inline">
                <select lay-search id="parentNetworkId" name="parentNetworkId" class="layui-select">
                    <option class="" value="">请选择所属网点</option>
                    <option th:each="net:${networks}" th:value="${net.networkId}" th:text="${net.networkName}"></option>
                </select>
            </div>
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label" style="width: 90px">启用状态</label>
            <div class="layui-input-inline">
                <!-- 注意事件监听是按照name属性进行监听的，如果没有添加name属性，是无法进行监听的 -->
                <select lay-search id="serviceCondition" name="serviceCondition" class="layui-select">
                    <option value="">请选择规则启用状态</option>
                    <option value="1">使用中</option>
                    <option value="0">已停用</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">请选择范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input"  name="searchTime" id="searchTime" placeholder=" ~ ">
            </div>
        </div>

        <button class="layui-btn" lay-submit="" lay-filter="search">
            <i class="layui-icon">&#xe615;</i>
        </button>

    </form>

    </div>

    <table class="layui-hide" id="tableId" lay-filter="orderNumberListTable"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<!--th:inline="none" 关闭Thymeleaf功能，防止冲突-->
<script th:inline="none">
    layui.use(["element", "table", "laydate", "okUtils", "okMock","okLayer", "form"], function () {
        var table = layui.table;
        var okUtils = layui.okUtils;
        var okLayer = layui.okLayer;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        okLoading.close();

        laydate.render({
            elem: '#searchTime'
            ,range: true
        });

        var	orderNumberListTable = table.render({
            elem: '#tableId',
            /* url: okMock.api.permission.list, */
            url:"/api/orderNumberList/list",
            limit: 20,
            page: true,
            cellMinWidth: 80,
            toolbar: true,
            toolbar: "#toolbarTpl",
            cols: [[{
                title: "全选",
                width: 50,
                type: "checkbox",
                fixed: 'left'},
                {field: "id", title: "序号", width: 110, sort: true, fixed: "left"},
                {field: "parentNetworkName", title: "所属网点名称", width: 150},
                {field: "startOddId", title: "开始单号", width: 100},
                {field: "grantOrderNumber", title: "发放单号数量", width: 100},
                {field: "useMaxOrderNumber", title: "使用最大单号", width: 200},
                {field: "endOrderNumber", title: "结束单号", width: 120, align: "center"},
                {field: "serviceCondition", title: "使用情况", width: 120, align: "center", templet: "#statusTpl"},
                {field: "createTime", title: "添加时间", width: 200},
                {field: "remark", title: "备注", width: 200},
                {title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
            ]],
            done: function (res, curr, count) {
                //禁止正在使用的规则的checkbox
                for (var i in res.data) {
                    var item = res.data[i];
                    if (item.serviceCondition == 1) {// 这里是判断需要禁用的条件（如：状态为0的）
                        $('tr[data-index=' + i + '] input[type="checkbox"]').remove();
                        $('tr[data-index=' + i + '] i[class="layui-icon layui-icon-ok"]').remove();
                        form.render();

                        //移除全选复选框 该代码必须写在from渲染的后面
                        this.elem.next('.layui-table-view').find('.layui-table-box .layui-table-header :checkbox[name="layTableCheckbox"]').next('.layui-form-checkbox').remove();

                    }
                }
                /* console.info(res, curr, count);   */
            }
        });

        form.on("submit(search)", function (data) {
            console.log(data.field)
            orderNumberListTable.reload({
                where:data.field,
                page: {curr: 1},
            });
            return false;
        });

        table.on("toolbar(orderNumberListTable)", function (obj) {
            switch (obj.event) {
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });

        table.on("tool(orderNumberListTable)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        //监听是否停用操作
        form.on('switch(serviceCondition)', function(obj){

            //取开关的值（跟传入开关的值相同，但名称不同）
            var state = obj.elem.checked?0:1;
            //取所有表格数据
            var tableData = table.cache['tableId'];
            //取表格一行数据 （根据索引table.cache里面的行数据）
            var index  = obj.othis.parents('tr').attr("data-index");
            var id = tableData[index].id;
            var parentNetworkId = tableData[index].parentNetworkId;
            console.log(id+","+state)

            //如果点击正在使用的，不会成功，点击不使用的，正在使用的变为不使用
            if(state == 1){
                okLayer.greenTickMsg("每个网点至少要有一种分配单号的方法", function () {});
                orderNumberListTable.reload({
                    page: {curr: 1},
                });
            }else {
                //将id,parentNetworkId，注意state是切换按钮之前的值，后台需要更改
                okUtils.ajax("/api/orderNumberList/changeUseStatus", "post",{"id":id,"parentNetworkId":parentNetworkId}, true).done(function (response) {
                    console.log(response);
                    okLayer.greenTickMsg("操作成功", function () {
                        orderNumberListTable.reload({
                            page: {curr: 1},
                        });
                    });
                }).fail(function (error) {
                    console.log(error);
                });
            }

        });

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                var idsStr = okUtils.tableBatchCheck(table);
                console.log(idsStr);
                if (idsStr) {
                    okUtils.ajax("/api/orderNumberList/delete", "post", {idsStr: idsStr}, true).done(function (response) {
                        console.log(response);
                        okUtils.tableSuccessMsg(response.msg);
                        orderNumberListTable.reload();
                    }).fail(function (error) {
                        console.log(error)
                    });
                }
            });
        }

        function add() {
            okLayer.open("添加规则", "orderNumberList/add", "90%", "90%", null, function () {
                orderNumberListTable.reload();
            })
        }

        function edit(data) {
            okLayer.open("更新规则", "orderNumberList/edit", "90%", "90%", function (layero) {
                var iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function () {
                orderNumberListTable.reload();
            })
        }

        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("/api/orderNumberList/delete", "post", {idsStr: id}, true).done(function (response) {
                    console.log(response);
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }

    });

</script>

<!-- 使用状态模板-->
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="serviceCondition" value="{{d.serviceCondition}}" lay-skin="switch" lay-text="使用中|已停用" lay-filter="serviceCondition" {{ d.serviceCondition == 1 ? 'checked' : '' }}>
</script>

<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <!--	必须设置样式为行级样式	-->
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加规则</button>
    </div>
</script>
<!--行工具栏模板-->
<!--如果规则正在使用不允许删除，只有不在使用的才可以删除-->
<script type="text/html" id="operationTpl">
    {{#  if(d.serviceCondition == 0){ }}
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    {{#  } else if(d.serviceCondition == 1) { }}
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    {{#  } }}
</script>
</body>
</html>
